import React from "react";
import { observer } from 'mobx-react';
import './video-marquee-buttom.scss';

//点击视频框可以把框栏向上回缩，用display设置整个层为none或flex实现。

export const VideoMarqueeButtom = observer( ()=>{
    const videotoggle = (evt: any) =>{
        var videoMarqueeContainer = document.getElementById("video-marquee-container");
        // @ts-ignore
        if(videoMarqueeContainer.style.display=='') {
            // @ts-ignore
            videoMarqueeContainer.style.display = 'flex';
        }
        // @ts-ignore
        if (videoMarqueeContainer.style.display == 'flex') {
            // @ts-ignore
            videoMarqueeContainer.style.display = 'none';
            // @ts-ignore
            document.getElementById("arrow").textContent = "▼";
        } else {
            // @ts-ignore
            videoMarqueeContainer.style.display = 'flex';
            // @ts-ignore
            document.getElementById("arrow").textContent = "▲";
        }
    }

    return(
        <div className='s-more-bar' onClick={videotoggle} ><span id='arrow'>▲</span></div>
    )


})